<template>
  <div>
     <ul v-show="historyList.length>0">
        <searc-history-item 
        v-for="(item,index) in historyList" 
        :key="item+index"
        :text="item"
        @dele-history="delehistory(index)"
        ></searc-history-item>
     </ul>
  </div>
</template>

<script>
import SearcHistoryItem from './SearcHistoryItem'
export default {
    components:{
        SearcHistoryItem
    },
    data(){
        return {
            historyList:[]
        }
    },
     created(){
         if(!localStorage.getItem('history'))return;
        this.historyList = localStorage.getItem('history').split(',');
    },
    methods:{
        delehistory(index){
            if(!localStorage.getItem('history'))return;
            this.historyList.splice(index,1);
            localStorage.setItem('history',this.historyList);
        }
    }
}
</script>

<style scoped>


</style>